<template>
  <view class="app-container tenant-contract-page">
    <view class="contract-wrapper">
      <!--未上传纸质合同图片: 预览合同-->
      <hxk-section title="预览" v-if="contractImgs.length === 0">
        <view class="contract-content" v-html="contract" slot="body">
        </view>
      </hxk-section>
      <!--已上传纸质合同图片: 查看合同-->
      <hxk-section title="查看合同" v-if="contractImgs.length">
        <u-album :urls="contractImgs" slot="body"></u-album>
      </hxk-section>
    </view>

  </view>
</template>

<script>
import {tenantPaperContractDetail} from "@/api/mine/owner";
import HxkSection from "@/components/hxk-card/index";

export default {
  components: {
    HxkSection
  },
  data() {
    return {
      contract: null,
      contractId: null,
      contractImgs: []
    };
  },
  onLoad(options) {
    const contractId = options.id;
    this.contractId = contractId;
    this.tenantPaperContractDetail(contractId);
  },
  methods: {
    tenantPaperContractDetail(contractId) {
      tenantPaperContractDetail(contractId).then(res => {
        this.contract = res.data.contractContent;
        const img = res.data.contractImage;
        if (img) {
          // 按','号分割
          this.contractImgs = img.split(',');
        }
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.tenant-contract-page {
  padding: 20rpx;

  .contract-wrapper {
    .contract-content {
      padding: 20rpx;
      background-color: #fff;
      border-radius: 10rpx;
    }
  }
}

</style>
